<template>
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <div class="login-list">
        <h3>登录后更精彩</h3>
        <p>
            新手机号将自动注册,已详读并同意<a href="#">用户协议和隐私政策</a>
        </p>
        <div>
            <button class="tel"> <i></i> 手机号登录</button>
        </div>
        <div>
           <router-link to="/sigin">
                <button class="pwd"> <i></i>账号密码登录</button>
           </router-link>
        </div>
        <div>
           <router-link to="/login">
                <button class="qq"> <i></i>邮箱登录</button>
           </router-link>
        </div>
        <div>
            <button class="wx"> <i></i> 微信登录</button>
        </div>
        <div>
            <router-link class="link" to="/register">免费注册</router-link>
        </div>
    </div>
    <footer class="footer">
        <van-divider :style="{ color: '#666', borderColor: '#ccc', padding: '0 16px' }">
            其他登录方式
        </van-divider>
        <div>
            <router-link to="/other">
                <van-icon name="fire-o" />
            </router-link>
            <router-link to="/other">
                <van-icon name="envelop-o" />
            </router-link>
        </div>
    </footer>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
const $router = useRouter()
const onClickLeft = () => {
    // console.log('返回')
    $router.back();
}
</script>
<style lang="less">
@import '@/static/less/common.less';


.login-list {
    padding: @pad;
    
    h3 {
        font-weight: normal;
        text-align: center;
        font-size: 22px;
        padding-top: 1.3333rem;
        padding-bottom: .2667rem;
    }
    p {
        text-align: center;
        padding: .5333rem  .8rem;
        font-size: 15px;
        line-height: 170%;
        color: #666;
        a {
            color: #000;
        }
    }

    button {
        display: block;
        border: 1px solid #ccc;
        background-color: transparent;
        height:  1.2267rem;
        width: 100%;
        margin-top: .4rem;
        border-radius: .6133rem;
        position: relative;
        font-size: 15px;
        i {
            display: block;
            width: .5333rem;
            height: .5333rem;
            // background-color:red;
            margin-top: .3467rem;
            margin-left: .5333rem;
            // background-position: center center;
            background-size: auto  100%;
            background-repeat: no-repeat;

            // 定位 让元素脱离正常文档流
            position: absolute;
            top: 0;
            left: 0;
        }
    }
    .tel {
        i {
            background-image: url(../static/img/i-tel.png);
        }
    }
    .pwd {
        i {
            background-image: url(../static/img/i-pwd.png);
        }
    }
    .wx {
        i {
            background-image: url(../static/img/i-wx.png);
        }
    }
    .qq {
        i {
            background-image: url(../static/img/i-qq.png);
        }
    }
}

.footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: .5333rem .8rem;
    box-sizing: border-box;
    div {
        text-align: center;
        .van-icon {
            font-size: 30px;
            margin: 0 .1333rem;
        }
    }
}
/* css3 变量 */
:root {
    --van-nav-bar-icon-color: #000;
    /* --aaa: red; */
    --van-background: #fff;
}

.van-nav-bar .van-icon {
    color: var(--van-nav-bar-icon-color);
    /* color: var(--aaa); */
}

a {
    color: #000;
}
.link {
    display: block;
    text-align: center;
    width: 100%;
    font-size: 14px;
    margin-top: .8rem;
    text-decoration: underline;
}
</style>